<template>
	<view>
		<view class="c-box" id="shareCenter" >
		    <view class="swiper-container" id="gallery" style="height: 66vh;">
		        <view class="swiper-wrapper">
		            <!--沈阳展会-->
		            <view class="swiper-slide" v-if="positionMap.has(40)">
		                <view id="diploma20"
		                     style="width:560rpx;margin: 35rpx 70rpx 0 70rpx;display: flex;justify-content: center">
		                    <view style="height: 100%;width:100%;position: relative;">
		                        <view class="center">
		                            <image style="width: 100%"
		                                 src="/static/image/shareTemplate/product_shareback7.jpg"/>
		                        </view>
		                        <view style="position: absolute;top:17%; left:0;display: flex;flex-direction: column;width: 100%;justify-content: center;align-items: center" >
		                            <image style="width: 14%" class="companyLogo" :src="compInfo.logo ? compInfo.logoBase64 : compInfo.logoBase64Default"/>
		                            <view class="text beyond"
		                                 style="font-size: 14px;font-weight: bold;">{{compInfo.company}}</view>
		
		                        </view>
		                        <view style="position: absolute;top:29%; left:0;border-radius:10px;overflow: hidden;width: 100%;display: flex;flex-direction: column;align-items: center">
		                            <image class="logo" style="width: 240rpx;height: 240rpx;" :src="productInfo.banarImgBase64"/>
		                        </view>
		                        <view style="position: absolute;top:52%; left:0;border-radius:10px;overflow: hidden;width: 100%;display: flex;flex-direction: column;align-items: center">
		                            <view class="beyond" style="margin-top: 7rpx;font-size: 12px;font-weight: bolder">{{productInfo.productName}}</view>
		                        </view>
		                        <view class="personInfo" style="position: absolute;top:56.5%;left: 18%; display: flex;width: 100%;flex-direction: column;align-items: center;justify-content: center">
		                            <view style="border-radius: 20px;margin-left: -50rpx;color: black;font-size: 13px;display: flex;align-items: center;">{{positionMap.get(40).exhibitionHall+positionMap.get(40).boothNumber}}</view>
		                        </view>
		                        <view class="center" style="position: absolute;top:63.6%; left:0;overflow: hidden;width: 100%;display: flex;flex-direction: column;align-items: center">
		                            <image style="width: 23%"
		                                 :src="'https://m.nocexpo.com/h5/qrCode/getQrcode?content='+registerUrlMap.get(40)"/>
		                        </view>
		                    </view>
		                </view>
		                <view style="margin: 2vh 23vw 0vh 23vw;display: flex;justify-content: center">
		                    <image class="template20" style="height: 100%;" :src="tempImgUrl"/>
		                </view>
		            </view>
		            <!--上海展会-->
		            <view class="swiper-slide" v-if="positionMap.has(37)">
		                <view id="diploma19"
		                     style="width:560rpx;margin: 35rpx 70rpx 0 70rpx;display: flex;justify-content: center">
		                    <view style="height: 100%;width:100%;position: relative;">
		                        <view class="center">
		                            <image style="width: 100%"
		                                 src="/static/image/shareTemplate/product_shareback6.jpg"/>
		                        </view>
		                        <view style="position: absolute;top:17%; left:0;display: flex;flex-direction: column;width: 100%;justify-content: center;align-items: center" >
		                            <image style="width: 14%" class="companyLogo" :src="compInfo.logo ? compInfo.logoBase64 : compInfo.logoBase64Default"/>
		                            <view class="text beyond"
		                                 style="font-size: 14px;font-weight: bold;">{{compInfo.company}}</view>
		
		                        </view>
		                        <view style="position: absolute;top:29%; left:0;border-radius:10px;overflow: hidden;width: 100%;display: flex;flex-direction: column;align-items: center">
		                            <image class="logo" style="width: 240rpx;height: 240rpx;" :src="productInfo.banarImgBase64"/>
		                        </view>
		                        <view style="position: absolute;top:52%; left:0;border-radius:10px;overflow: hidden;width: 100%;display: flex;flex-direction: column;align-items: center">
		                            <view class="beyond" style="margin-top: 7rpx;font-size: 12px;font-weight: bolder">{{productInfo.productName}}</view>
		                        </view>
		                        <view class="personInfo" style="position: absolute;top:56.5%;left: 18%; display: flex;width: 100%;flex-direction: column;align-items: center;justify-content: center">
		                            <view style="border-radius: 20px;margin-left: -50rpx;color: black;font-size: 13px;display: flex;align-items: center;">{{positionMap.get(37).exhibitionHall+positionMap.get(37).boothNumber}}</view>
		                        </view>
		                        <view class="center" style="position: absolute;top:63.6%; left:0;overflow: hidden;width: 100%;display: flex;flex-direction: column;align-items: center">
		                            <image style="width: 23%"
		                                 :src="'https://m.nocexpo.com/h5/qrCode/getQrcode?content='+registerUrlMap.get(37)"/>
		                        </view>
		                    </view>
		                </view>
		                <view style="margin: 2vh 23vw 0vh 23vw;display: flex;justify-content: center">
		                    <image class="template19" style="height: 100%;" :src="tempImgUrl"/>
		                </view>
		            </view>
		            <!--青岛展会-->
		            <view class="swiper-slide" v-if="positionMap.has(43)">
		                <view id="diploma18"
		                     style="width:560rpx;margin: 35rpx 70rpx 0 70rpx ;display: flex;justify-content: center">
		                    <view style="height: 100%;width:100%;position: relative;">
		                        <view class="center">
		                            <image style="width: 100%"
		                                 src="/static/image/shareTemplate/product_shareback5.png"/>
		                        </view>
		                        <view style="position: absolute;top:19%; left:0;display: flex;flex-direction: column;width: 100%;justify-content: center;align-items: center" >
		                            <image style="width: 14%" class="companyLogo" :src="compInfo.logo ? compInfo.logoBase64 : compInfo.logoBase64Default"/>
		                            <view class="text beyond"
		                                 style="font-size: 14px;font-weight: bold;">{{compInfo.company}}</view>
		
		                        </view>
		                        <view style="position: absolute;top:31%; left:0;border-radius:10px;overflow: hidden;width: 100%;display: flex;flex-direction: column;align-items: center">
		                            <image class="logo" style="width: 240rpx;height: 240rpx;" :src="productInfo.banarImgBase64"/>
		                        </view>
		                        <view style="position: absolute;top:54%; left:0;border-radius:10px;overflow: hidden;width: 100%;display: flex;flex-direction: column;align-items: center">
		                            <view class="beyond" style="margin-top: 7rpx;font-size: 12px;font-weight: bolder">{{productInfo.productName}}</view>
		                        </view>
		                        <view class="personInfo" style="position: absolute;top:58.5%;left: 18%; display: flex;width: 100%;flex-direction: column;align-items: center;justify-content: center">
		                            <view style="border-radius: 20px;margin-left: -50rpx;color: black;font-size: 13px;display: flex;align-items: center;">{{positionMap.get(43).exhibitionHall+positionMap.get(43).boothNumber}}</view>
		                        </view>
		                        <view class="center" style="position: absolute;top:66.6%; left:0;overflow: hidden;width: 100%;display: flex;flex-direction: column;align-items: center">
		                            <image style="width: 23%"
		                                 :src="'https://m.nocexpo.com/h5/qrCode/getQrcode?content='+registerUrlMap.get(43)"/>
		                        </view>
		                    </view>
		                </view>
		                <view style="margin: 2vh 23vw 0vh 23vw;display: flex;justify-content: center">
		                    <image class="template18" style="height: 100%;" :src="tempImgUrl"/>
		                </view>
		            </view>
		            <!--宁波展会-->
		            <view class="swiper-slide" v-if="positionMap.has(33)">
		                <view id="diploma17"
		                     style="width: 560rpx;margin: 35rpx 70rpx 0 70rpx;display: flex;justify-content: center">
		                    <view style="height: 100%;width:100%;position: relative;">
		                        <view style="position: absolute;top:26%; left:0;border-radius:10px;overflow: hidden;width: 100%;display: flex;flex-direction: column;align-items: center">
		                            <view class="text beyond"
		                                 style="font-size: 15px;font-weight: bold;color: white">{{compInfo.company}}</view>
		                        </view>
		                        <view class="center">
		                            <image style="width: 100%"
		                                 src="/static/image/shareTemplate/product_shareback4.jpg"/>
		                        </view>
		                        <view style="position: absolute;top:36%; left:5%;display: flex;flex-direction: column;width: 100%;" >
		                            <image style="width: 19%" class="companyLogo" :src="compInfo.logo ? compInfo.logoBase64 : compInfo.logoBase64Default"/>
		                        </view>
		                        <view style="position: absolute;top:34.4%; left:41%;overflow: hidden;width: 100%;">
		                            <image class="logo" style="width: 270rpx;height: 270rpx;" :src="productInfo.banarImgBase64"/>
		                        </view>
		                        <view style="position: absolute;top:64%; left:0;border-radius:10px;overflow: hidden;width: 100%;display: flex;flex-direction: column;align-items: center">
		                            <view class="beyond" style="margin-top: 7rpx;font-size: 14px;font-weight: bolder;color: #1765ad">{{productInfo.productName}}</view>
		                        </view>
		                        <view class="personInfo" style="position: absolute;top:52%;left: 23%;width: 100%;">
		                            <view style="border-radius: 20px;margin-left: -50rpx;color: black;font-size: 10px;display: flex;align-items: center;">{{positionMap.get(33).exhibitionHall+positionMap.get(33).boothNumber}}</view>
		                        </view>
		                        <view class="center" style="position: absolute;top:76.6%; left:64%;overflow: hidden;width: 100%;">
		                            <image style="width: 27%"
		                                 :src="'https://m.nocexpo.com/h5/qrCode/getQrcode?content='+registerUrlMap.get(33)"/>
		                        </view>
		                    </view>
		                </view>
		                <view style="margin: 2vh 23vw 0vh 23vw;display: flex;justify-content: center">
		                    <image class="template17" style="height: 100%;" :src="tempImgUrl"/>
		                </view>
		            </view>
		            <!--亚太智能展会-->
		            <view class="swiper-slide" v-if="positionMap.has(45)">
		                <view id="diploma16"
		                     style="width: 560rpx;margin: 35rpx 70rpx 0 70rpx;display: flex;justify-content: center">
		                    <view style="height: 100%;width:100%;position: relative;">
		                        <view class="center">
		                            <image style="width: 100%"
		                                 src="/static/image/shareTemplate/product_shareback3.jpg"/>
		                        </view>
		                        <view style="position: absolute;top:19%; left:0;display: flex;flex-direction: column;width: 100%;justify-content: center;align-items: center" >
		                            <image style="width: 14%" class="companyLogo" :src="compInfo.logo ? compInfo.logoBase64 : compInfo.logoBase64Default"/>
		                            <view class="text beyond"
		                                 style="font-size: 14px;font-weight: bold;">{{compInfo.company}}</view>
		
		                        </view>
		                        <view style="position: absolute;top:31%; left:0;border-radius:10px;overflow: hidden;width: 100%;display: flex;flex-direction: column;align-items: center">
		                            <image class="logo" style="width: 240rpx;height: 240rpx;" :src="productInfo.banarImgBase64"/>
		                        </view>
		                        <view style="position: absolute;top:54%; left:0;border-radius:10px;overflow: hidden;width: 100%;display: flex;flex-direction: column;align-items: center">
		                            <view class="beyond" style="margin-top: 7rpx;font-size: 12px;font-weight: bolder">{{productInfo.productName}}</view>
		                        </view>
		                        <view class="personInfo" style="position: absolute;top:58.5%;left: 18%; display: flex;width: 100%;flex-direction: column;align-items: center;justify-content: center">
		                            <view style="border-radius: 20px;margin-left: -50rpx;color: black;font-size: 13px;display: flex;align-items: center;">{{positionMap.get(45).exhibitionHall+positionMap.get(45).boothNumber}}</view>
		                        </view>
		                        <view class="center" style="position: absolute;top:66.6%; left:0;overflow: hidden;width: 100%;display: flex;flex-direction: column;align-items: center">
		                            <image style="width: 23%"
		                                 :src="'https://m.nocexpo.com/h5/qrCode/getQrcode?content='+registerUrlMap.get(45)"/>
		                        </view>
		                    </view>
		                </view>
		                <view style="margin: 2vh 23vw 0vh 23vw;display: flex;justify-content: center">
		                    <image class="template16" style="height: 100%;" :src="tempImgUrl"/>
		                </view>
		            </view>
		            <!--亚太橡塑展会-->
		            <view class="swiper-slide" v-if="positionMap.has(44)">
		                <view id="diploma15"
		                     style="width: 560rpx;margin: 35rpx 70rpx 0 70rpx;display: flex;justify-content: center">
		                    <view style="height: 100%;width:100%;position: relative;">
		                        <view class="center">
		                            <image style="width: 100%"
		                                 src="/static/image/shareTemplate/product_shareback2.jpg"/>
		                        </view>
		                        <view style="position: absolute;top:16.4%; left:0;display: flex;flex-direction: column;width: 100%;justify-content: center;align-items: center" >
		                            <image style="width: 14%" class="companyLogo" :src="compInfo.logo ? compInfo.logoBase64 : compInfo.logoBase64Default"/>
		                            <view class="text beyond"
		                                 style="font-size: 14px;font-weight: bold;">{{compInfo.company}}</view>
		
		                        </view>
		                        <view style="position: absolute;top:29%; left:0;border-radius:10px;overflow: hidden;width: 100%;display: flex;flex-direction: column;align-items: center">
		                            <image class="logo" style="width: 240rpx;height: 240rpx;" :src="productInfo.banarImgBase64"/>
		                        </view>
		                        <view style="position: absolute;top:52%; left:0;border-radius:10px;overflow: hidden;width: 100%;display: flex;flex-direction: column;align-items: center">
		                            <view class="beyond" style="margin-top: 7rpx;font-size: 12px;font-weight: bolder">{{productInfo.productName}}</view>
		                        </view>
		                        <view class="personInfo" style="position: absolute;top:56%;left: 14%; display: flex;width: 100%;flex-direction: column;align-items: center;justify-content: center">
		                            <view style="border-radius: 20px;margin-left: -50rpx;color: black;font-size: 13px;display: flex;align-items: center;">{{positionMap.get(44).exhibitionHall+positionMap.get(44).boothNumber}}</view>
		                        </view>
		                        <view class="center" style="position: absolute;top:63.6%; left:0%;overflow: hidden;width: 100%;display: flex;flex-direction: column;align-items: center">
		                            <image style="width: 23%"
		                                 :src="'https://m.nocexpo.com/h5/qrCode/getQrcode?content='+registerUrlMap.get(44)"/>
		                        </view>
		                    </view>
		                </view>
		                <view style="margin: 2vh 23vw 0vh 23vw;display: flex;justify-content: center">
		                    <image class="template15" style="height: 100%;" :src="tempImgUrl"/>
		                </view>
		            </view>
		            <!--亚太轮胎-->
		            <view class="swiper-slide" v-if="positionMap.has(36)">
		                <view id="diploma21"
		                     style="width: 560rpx;margin: 35rpx 70rpx 0 70rpx;display: flex;justify-content: center">
		                    <view style="height: 100%;width:100%;position: relative;">
		                        <view class="center">
		                            <image style="width: 100%"
		                                 src="/static/image/shareTemplate/product_shareback8.jpg"/>
		                        </view>
		                        <view style="position: absolute;top:16.4%; left:0;display: flex;flex-direction: column;width: 100%;justify-content: center;align-items: center" >
		                            <image style="width: 14%" class="companyLogo" :src="compInfo.logo ? compInfo.logoBase64 : compInfo.logoBase64Default"/>
		                            <view class="text beyond"
		                                 style="font-size: 14px;font-weight: bold;">{{compInfo.company}}</view>
		
		                        </view>
		                        <view style="position: absolute;top:28%; left:0;border-radius:10px;overflow: hidden;width: 100%;display: flex;flex-direction: column;align-items: center">
		                            <image class="logo" style="width: 240rpx;height: 240rpx;" :src="productInfo.banarImgBase64"/>
		                        </view>
		                        <view style="position: absolute;top:52%; left:0;border-radius:10px;overflow: hidden;width: 100%;display: flex;flex-direction: column;align-items: center">
		                            <view class="beyond" style="margin-top: 7rpx;font-size: 12px;font-weight: bolder">{{productInfo.productName}}</view>
		                        </view>
		                        <view class="personInfo" style="position: absolute;top:56%;left: 14%; display: flex;width: 100%;flex-direction: column;align-items: center;justify-content: center">
		                            <view style="border-radius: 20px;margin-left: -50rpx;color: black;font-size: 13px;display: flex;align-items: center;">{{positionMap.get(36).exhibitionHall+positionMap.get(36).boothNumber}}</view>
		                        </view>
		                        <view class="center" style="position: absolute;top:63.6%; left:0%;overflow: hidden;width: 100%;display: flex;flex-direction: column;align-items: center">
		                            <image style="width: 23%"
		                                 :src="'https://m.nocexpo.com/h5/qrCode/getQrcode?content='+registerUrlMap.get(36)"/>
		                        </view>
		                    </view>
		                </view>
		                <view style="margin: 2vh 23vw 0vh 23vw;display: flex;justify-content: center">
		                    <image class="template21" style="height: 100%;" :src="tempImgUrl"/>
		                </view>
		            </view>
		
		
		
		            <!--济南机床展-->
		            <view class="swiper-slide" v-if="positionMap.has(42)">
		                <view id="diploma12"
		                     style="width: 560rpx;margin: 35rpx 70rpx 0 70rpx;display: flex;justify-content: center">
		                    <view style="height: 100%;width:100%;position: relative;">
		                        <view style="position: absolute;top:26%; left:0;border-radius:10px;overflow: hidden;width: 100%;display: flex;flex-direction: column;align-items: center">
		                            <view class="text beyond"
		                                 style="font-size: 15px;font-weight: bold;color: white">{{compInfo.company}}</view>
		                        </view>
		                        <view class="center">
		                            <image style="width: 100%"
		                                 src="/static/image/shareTemplate/product_shareback9.png"/>
		                        </view>
		                        <view style="position: absolute;top:36%; left:5%;display: flex;flex-direction: column;width: 100%;" >
		                            <image style="width: 19%" class="companyLogo" :src="compInfo.logo ? compInfo.logoBase64 : compInfo.logoBase64Default"/>
		                        </view>
		                        <view style="position: absolute;top:34.4%; left:41%;overflow: hidden;width: 100%;">
		                            <image class="logo" style="width: 280rpx;height: 280rpx;" :src="productInfo.banarImgBase64"/>
		                        </view>
		                        <view style="position: absolute;top:64%; left:0;border-radius:10px;overflow: hidden;width: 100%;display: flex;flex-direction: column;align-items: center">
		                            <view class="beyond" style="margin-top: 14rpx;font-size: 14px;font-weight: bolder;color: #1765ad">{{productInfo.productName}}</view>
		                        </view>
		                        <view class="personInfo" style="position: absolute;top:49%;left: 33%;width: 100%;">
		                            <view style="border-radius: 20px;margin-left: -50rpx;color: black;font-size: 10px;display: flex;align-items: center;">{{positionMap.get(42).exhibitionHall+positionMap.get(42).boothNumber}}</view>
		                        </view>
		                        <view class="center" style="position: absolute;top:76.6%; left:64%;overflow: hidden;width: 100%;">
		                            <image style="width: 27%"
		                                 :src="'https://m.nocexpo.com/h5/qrCode/getQrcode?content='+registerUrlMap.get(42)"/>
		                        </view>
		                    </view>
		                </view>
		                <view style="margin: 2vh 23vw 0vh 23vw;display: flex;justify-content: center">
		                    <image class="template12" style="height: 100%;" :src="tempImgUrl"/>
		                </view>
		            </view>
		            <!--青岛金属加工展-->
		            <view class="swiper-slide" v-if="positionMap.has(32)">
		                <view id="diploma13"
		                     style="width: 560rpx;margin: 35rpx 70rpx 0 70rpx;display: flex;justify-content: center">
		                    <view style="height: 100%;width:100%;position: relative;">
		                        <view class="center">
		                            <image style="width: 100%"
		                                 src="/static/image/shareTemplate/product_shareback10.jpg"/>
		                        </view>
		                        <view style="position: absolute;top:19%; left:0;display: flex;flex-direction: column;width: 100%;justify-content: center;align-items: center" >
		                            <image style="width: 18%" class="companyLogo" :src="compInfo.logo ? compInfo.logoBase64 : compInfo.logoBase64Default"/>
		                            <view class="text beyond"
		                                 style="font-size: 14px;font-weight: bold;">{{compInfo.company}}</view>
		
		                        </view>
		                        <view style="position: absolute;top:35%; left:0;border-radius:10px;overflow: hidden;width: 100%;display: flex;flex-direction: column;align-items: center">
		                            <image class="logo" style="width: 240rpx;height: 240rpx;" :src="productInfo.banarImgBase64"/>
		                        </view>
		                        <view style="position: absolute;top:59%; left:0;border-radius:10px;overflow: hidden;width: 100%;display: flex;flex-direction: column;align-items: center">
		                            <view class="beyond" style="margin-top: 7rpx;font-size: 12px;font-weight: bolder">{{productInfo.productName}}</view>
		                        </view>
		                        <view class="personInfo" style="position: absolute;top:65.3%;left: 14%; display: flex;width: 100%;flex-direction: column;align-items: center;justify-content: center">
		                            <view style="border-radius: 20px;margin-left: -50rpx;color: white;font-size: 13px;display: flex;align-items: center;">{{positionMap.get(32).exhibitionHall+positionMap.get(32).boothNumber}}</view>
		                        </view>
		                        <view class="center" style="position: absolute;top:80%; left:77%;border-radius:10px;overflow: hidden;width: 100%;">
		                            <image style="width: 23%"
		                                 :src="'https://m.nocexpo.com/h5/qrCode/getQrcode?content='+registerUrlMap.get(32)"/>
		                        </view>
		                    </view>
		                </view>
		                <view style="margin: 2vh 23vw 0vh 23vw;display: flex;justify-content: center">
		                    <image class="template13" style="height: 100%;" :src="tempImgUrl"/>
		                </view>
		            </view>
		
		            <!--铝工业展会-->
		            <view class="swiper-slide" v-if="positionMap.has(39)">
		                <view id="diploma14"
		                     style="width: 560rpx;margin: 35rpx 70rpx 0 70rpx;;display: flex;justify-content: center">
		                    <view style="height: 100%;width:100%;position: relative;">
		                        <view class="center">
		                            <image style="width: 100%"
		                                 src="/static/image/shareTemplate/product_shareback1.jpg"/>
		                        </view>
		                        <view style="position: absolute;top:19%; left:0;display: flex;flex-direction: column;width: 100%;justify-content: center;align-items: center" >
		                            <image style="width: 18%" class="companyLogo" :src="compInfo.logo ? compInfo.logoBase64 : compInfo.logoBase64Default"/>
		                            <view class="text beyond"
		                                 style="font-size: 14px;font-weight: bold;">{{compInfo.company}}</view>
		
		                        </view>
		                        <view style="position: absolute;top:35%; left:0;border-radius:10px;overflow: hidden;width: 100%;display: flex;flex-direction: column;align-items: center">
		                            <image class="logo" style="width: 240rpx;height: 240rpx;" :src="productInfo.banarImgBase64"/>
		                        </view>
		                        <view style="position: absolute;top:59%; left:0;border-radius:10px;overflow: hidden;width: 100%;display: flex;flex-direction: column;align-items: center">
		                            <view class="beyond" style="margin-top: 7rpx;font-size: 12px;font-weight: bolder">{{productInfo.productName}}</view>
		                        </view>
		                        <view class="personInfo" style="position: absolute;top:65.3%;left: 14%; display: flex;width: 100%;flex-direction: column;align-items: center;justify-content: center">
		                            <view style="border-radius: 20px;margin-left: -50rpx;color: white;font-size: 13px;display: flex;align-items: center;">{{positionMap.get(39).exhibitionHall+positionMap.get(39).boothNumber}}</view>
		                        </view>
		                        <view class="center" style="position: absolute;top:80%; left:77%;border-radius:10px;overflow: hidden;width: 100%;">
		                            <image style="width: 23%"
		                                 :src="'https://m.nocexpo.com/h5/qrCode/getQrcode?content='+registerUrlMap.get(39)"/>
		                        </view>
		                    </view>
		                </view>
		                <view style="margin: 2vh 23vw 0vh 23vw;display: flex;justify-content: center">
		                    <image class="template14" style="height: 100%;" :src="tempImgUrl"/>
		                </view>
		            </view>
		            <view class="swiper-slide">
		                <!--模板1-->
		                <view id="diploma1" style="height: 1190rpx;width: 560rpx;margin: 35rpx 70rpx 0 70rpx;display: flex;justify-content: center">
		                    <view style="height: 100%;width:100%;position: relative;background-image: url('/static/image/shareTemplate/shareProduct1.png');background-size:100% 100%;-moz-background-size:100% 100%;">
		                        <view class="personInfo" style="position: absolute;top:6%; left:10%;display: flex;">
		                            <image id="portrait" class="portrait"
		                                 style=" flex-shrink: 0;width: 70rpx;height: 70rpx;border-radius: 50%;overflow: hidden;border: 1px solid rgb(153, 153, 153);"
		                                 :src= "currentUser.portraitBase64 ? currentUser.portraitBase64 : '/static/image/shareTemplate/wutouxiang2.png'"/>
		                            <view class="text"
		                                  style=" width: 78%;margin-left: 21rpx;color: #737777;font-size: 10px;display: flex;align-items: center;">{{currentUser.userName}}分享给你一款产品</view>
		                        </view>
		                        <view  style="position: absolute;top:17%; left:0;display: flex;width: 100%;justify-content: center;" >
		                            <view class="text beyond"
		                                  style="margin-left: 21rpx;color: #737777;font-size: 12px;font-weight: bold;color: #445e71;">{{productInfo.company}}</view>
		                        </view>
		                        <view style="position: absolute;top:27%; left:22%;border-radius:10px;overflow: hidden;width: 55%;height: 29%;overflow: hidden;">
		                            <image class="logo" :src="productInfo.banarImgBase64"/>
		                        </view>
		                        <view style="position: absolute;top:59%; left:0;border-radius:10px;overflow: hidden;width: 100%;display: flex;flex-direction: column;align-items: center">
		
		                            <view class="beyond" style="font-size: 12px;font-weight: bolder;color: white">{{productInfo.productName}}</view>
		                            <view class="beyond" style="margin-top: 21rpx;font-size: 10px;color: white;display: flex;align-items: center"><img style="margin-right: 14rpx;width: 25rpx" src="/static/image/shareTemplate/img1.png"/>分类：{{productInfo.className}}</view>
		                            <view class="beyond" style="font-size: 10px;color: white;display: flex;align-items: center"><img style="margin-right: 14rpx;width: 25rpx"  src="/static/image/shareTemplate/img2.png"/>型号：{{productInfo.productModel}}</view>
		                        </view>
		                        <view style="position: absolute;top:78%; left:0;border-radius:10px;overflow: hidden;width: 100%;display: flex;flex-direction: column;align-items: center">
		                            <image style="width: 23%"
		                                 :src="'https://m.nocexpo.com/h5/qrCode/getQrcode?content=https://m.nocexpo.com/h5/productMain.html?productId='+productId"/>
		                            <view style="display: flex;flex-direction: column">
		                                <view style="text-align: justify;text-align-last: justify;color: #a9a9a9;font-size: 8px">长按二维码</view>
		                                <view style="text-align: justify;text-align-last: justify;color: #a9a9a9;font-size: 8px">进入企业产品</view>
		                            </view>
		                        </view>
		                    </view>
		                </view>
		                <view style="margin: 2vh 23vw 0vh 23vw;display: flex;justify-content: center">
		                    <image crossorigin="anonymous" style="height: 100%;" class="template1"/></view>
		            </view>
		        </view>
		    </view>
		    <view style="margin:21rpx 0;display: flex;justify-content: center;align-items: center">
		            <image style="margin-right: 14rpx;width: 35rpx;height: 35rpx;" src="/static/image/shareTemplate/touch.png"/>
		            <view style="font-size: 15px;font-weight: bold;">
		                长按上方图片保存并分享
		            </view>
		    </view>
		    <view class="swiper-container" id="thumbs" style="background-color: #ffffff; ">
		        <view class="swiper-wrapper" style="padding-top:21rpx;padding-bottom: 21rpx">
		            <view  class="swiper-slide thumbs-slide" v-if="positionMap.has(40)">
		                <image crossorigin="anonymous" class="template20" style="border-radius: 5px;overflow: hidden" :src="tempImgUrl"/>
		                <image class="active-thumb" style="position: absolute;top: 77%;left: 63%;width: 27%;" src="/static/image/shareTemplate/activethump2.png"/>
		            </view>
		            <view  class="swiper-slide thumbs-slide" v-if="positionMap.has(37)">
		                <image crossorigin="anonymous" class="template19" style="border-radius: 5px;overflow: hidden" :src="tempImgUrl"/>
		                <image class="active-thumb" style="position: absolute;top: 77%;left: 63%;width: 27%;" src="/static/image/shareTemplate/activethump2.png"/>
		            </view>
		            <view  class="swiper-slide thumbs-slide" v-if="positionMap.has(43)">
		                <image crossorigin="anonymous" class="template18" style="border-radius: 5px;overflow: hidden" :src="tempImgUrl"/>
		                <image class="active-thumb" style="position: absolute;top: 77%;left: 63%;width: 27%;" src="/static/image/shareTemplate/activethump2.png"/>
		            </view>
		            <view  class="swiper-slide thumbs-slide" v-if="positionMap.has(33)">
		                <image crossorigin="anonymous" class="template17" style="border-radius: 5px;overflow: hidden" :src="tempImgUrl"/>
		                <image class="active-thumb" style="position: absolute;top: 77%;left: 63%;width: 27%;" src="/static/image/shareTemplate/activethump2.png"/>
		            </view>
		            <view  class="swiper-slide thumbs-slide" v-if="positionMap.has(45)">
		                <image crossorigin="anonymous" class="template16" style="border-radius: 5px;overflow: hidden" :src="tempImgUrl"/>
		                <image class="active-thumb" style="position: absolute;top: 77%;left: 63%;width: 27%;" src="/static/image/shareTemplate/activethump2.png"/>
		            </view>
		            <view  class="swiper-slide thumbs-slide" v-if="positionMap.has(44)">
		                <image crossorigin="anonymous" class="template15" style="border-radius: 5px;overflow: hidden" :src="tempImgUrl"/>
		                <image class="active-thumb" style="position: absolute;top: 77%;left: 63%;width: 27%;" src="/static/image/shareTemplate/activethump2.png"/>
		            </view>
		            <view  class="swiper-slide thumbs-slide" v-if="positionMap.has(36)">
		                <image crossorigin="anonymous" class="template21" style="border-radius: 5px;overflow: hidden" :src="tempImgUrl"/>
		                <image class="active-thumb" style="position: absolute;top: 77%;left: 63%;width: 27%;" src="/static/image/shareTemplate/activethump2.png"/>
		            </view>
		            <view  class="swiper-slide thumbs-slide"  v-if="positionMap.has(42)">
		                <image crossorigin="anonymous" class="template12" style="border-radius: 5px;overflow: hidden" :src="tempImgUrl"/>
		                <image class="active-thumb" style="position: absolute;top: 77%;left: 63%;width: 27%;" src="/static/image/shareTemplate/activethump2.png"/>
		            </view>
		            <view  class="swiper-slide thumbs-slide"  v-if="positionMap.has(32)">
		                <image crossorigin="anonymous" class="template13" style="border-radius: 5px;overflow: hidden" :src="tempImgUrl"/>
		                <image class="active-thumb" style="position: absolute;top: 77%;left: 63%;width: 27%;" src="/static/image/shareTemplate/activethump2.png"/>
		            </view>
		            <view  class="swiper-slide thumbs-slide"  v-if="positionMap.has(39)">
		                <image crossorigin="anonymous" class="template14" style="border-radius: 5px;overflow: hidden" :src="tempImgUrl"/>
		                <image class="active-thumb" style="position: absolute;top: 77%;left: 63%;width: 27%;" src="/static/image/shareTemplate/activethump2.png"/>
		            </view>
		            <view class="swiper-slide" style="border-radius: 7px;padding: 4rpx;overflow: hidden">
		                <image crossorigin="anonymous" class="template1" style="border-radius: 5px;overflow: hidden" :src="tempImgUrl"/>
		                <image class="active-thumb" style="position: absolute;top: 77%;left: 63%;width: 27%;"  src="/static/image/shareTemplate/activethump2.png"/>
		            </view>
		
		        </view>
		    </view>
		    <view id="view"></view>
		</view>
	</view>
</template>

<script>
import shareApi from '@/api/shareProduct.js';
import commonApi from '@/utils/commonMethod.js';
export default {
	data() {
		return {
			productInfo: {},
			currentUser: {},
			productId: '',
			activeIndex:0,
			compInfo:{},
			positionMap:new Map([]),
			registerUrlMap:new Map([]),
			tempImgUrl:'',
		}
	},
   async onLoad(options) {
		this.productId = options.productId
		//获取当前用户
		const currentPromise = await commonApi.currentUserAxios()
		this.currentUser = currentPromise.data.session_user_h5
		if(this.currentUser.portraitBase64){
			// $('.portrait').attr('src', this.currentUser.portraitBase64)
		}

		shareApi.getProductInfo(this.productId).then(async res => {
			console.log(res)
			this.productInfo = res.data.product
			
			shareApi.getCompInfo(this.productInfo.userId.toString()).then(async response => {
				this.compInfo = response.data.vo
				let positionList = response.data.positionList
				this.positionMap = new Map([])
				this.registerUrlMap = new Map([])
				positionList.forEach((value, index, array) => {
					let valueJSON = JSON.parse(value)
					this.positionMap.set(valueJSON.exhibitionId,valueJSON)
					let registerUrl = 'http://preg.jinnoc.com/h5/index?tid='+valueJSON.nocTemplateId+'&ly=kuoyao'+'&companyId='+this.compInfo.id
					this.registerUrlMap.set(valueJSON.exhibitionId,registerUrl)
				})
				// this.$nextTick(() => {
					//设置图片
					// if(this.compInfo.logo){
					// 	$('.companyLogo').attr('src', this.compInfo.logoBase64)
					// }else{
					// 	$('.companyLogo').attr('src', this.compInfo.logoBase64Default)
					// }
					// $('.logo').attr('src', this.productInfo.banarImgBase64)
					
					// this.initSwiper()
					this.initTemplate()
				 // })
			})
		})

	},
	methods: {
		initTemplate() {
			html2canvas(document.getElementById('diploma1'), {scale: 4,useCORS: true}).then((canvas) => {
				var base64 = canvas.toDataURL('image/jpeg', 1);
				this.tempImgUrl =  canvas.toDataURL('image/jpeg', 1);
				// $('.template1').attr('src', base64)  // 将img  src设置base64
				// document.getElementById('diploma1').remove();
			});
			if (this.positionMap.has(42)){
				html2canvas(document.getElementById('diploma12'), {scale: 4,allowTaint:true}).then((canvas) => {
					var base64 = canvas.toDataURL('image/jpeg', 1);
					this.tempImgUrl = canvas.toDataURL('image/jpeg', 1);
					// $('.template12').attr('src', base64)  // 将img  src设置base64
					// document.getElementById('diploma12').remove();
				});
			}
			if(this.positionMap.has(32)){
				html2canvas(document.getElementById('diploma13'), {scale: 4,allowTaint:true}).then((canvas) => {
					var base64 = canvas.toDataURL('image/jpeg', 1);
					this.tempImgUrl = canvas.toDataURL('image/jpeg', 1);
					// $('.template13').attr('src', base64)  // 将img  src设置base64
					// document.getElementById('diploma13').remove();
				});
			}
			if(this.positionMap.has(39)){
				html2canvas(document.getElementById('diploma14'), {scale: 4,allowTaint:true}).then((canvas) => {
					var base64 = canvas.toDataURL('image/jpeg', 1);
					this.tempImgUrl = canvas.toDataURL('image/jpeg', 1);
					// $('.template14').attr('src', base64)  // 将img  src设置base64
					// document.getElementById('diploma14').remove();
				});
			}
			if(this.positionMap.has(44)){
				html2canvas(document.getElementById('diploma15'), {scale: 4,allowTaint:true}).then((canvas) => {
					var base64 = canvas.toDataURL('image/jpeg', 1);
					this.tempImgUrl = canvas.toDataURL('image/jpeg', 1);
					// $('.template15').attr('src', base64)  // 将img  src设置base64
					// document.getElementById('diploma15').remove();
				});
			}
			if(this.positionMap.has(36)){
				html2canvas(document.getElementById('diploma21'), {scale: 4,allowTaint:true}).then((canvas) => {
					var base64 = canvas.toDataURL('image/jpeg', 1);
					// $('.template21').attr('src', base64)  // 将img  src设置base64
					// document.getElementById('diploma21').remove();
				});
			}
			if(this.positionMap.has(45)){
				html2canvas(document.getElementById('diploma16'), {scale: 4,allowTaint:true}).then((canvas) => {
					var base64 = canvas.toDataURL('image/jpeg', 1);
					// $('.template16').attr('src', base64)  // 将img  src设置base64
					// document.getElementById('diploma16').remove();
				});
			}
			if(this.positionMap.has(33)){
				html2canvas(document.getElementById('diploma17'), {scale: 4,allowTaint:true}).then((canvas) => {
					var base64 = canvas.toDataURL('image/jpeg', 1);
					this.tempImgUrl = canvas.toDataURL('image/jpeg', 1);
					// $('.template17').attr('src', base64)  // 将img  src设置base64
					// document.getElementById('diploma17').remove();
				});
			}
			if(this.positionMap.has(43)){
				html2canvas(document.getElementById('diploma18'), {scale: 4,allowTaint:true}).then((canvas) => {
					var base64 = canvas.toDataURL('image/jpeg', 1);
					this.tempImgUrl = canvas.toDataURL('image/jpeg', 1);
					// $('.template18').attr('src', base64)  // 将img  src设置base64
					// document.getElementById('diploma18').remove();
				});
			}
			if(this.positionMap.has(37)){
				html2canvas(document.getElementById('diploma19'), {scale: 4,allowTaint:true}).then((canvas) => {
					var base64 = canvas.toDataURL('image/jpeg', 1);
					this.tempImgUrl = canvas.toDataURL('image/jpeg', 1);
					// $('.template19').attr('src', base64)  // 将img  src设置base64
					// document.getElementById('diploma19').remove();
				});
			}
			if(this.positionMap.has(40)){
				html2canvas(document.getElementById('diploma20'), {scale: 4,allowTaint:true}).then((canvas) => {
					var base64 = canvas.toDataURL('image/jpeg', 1);
					this.tempImgUrl = canvas.toDataURL('image/jpeg', 1);
					// $('.template20').attr('src', base64)  // 将img  src设置base64
					// document.getElementById('diploma20').remove();
				});
			}
		},
		// initSwiper() {
		// 	var gallerySwiper = new Swiper('#gallery', {
		// 		autoplay: false,//可选选项，自动滑动
		// 		grabCursor: true,
		// 		thumbs: {
		// 			swiper: {
		// 				el: '#thumbs',
		// 				spaceBetween: 10,
		// 				slidesPerView: 4,
		// 				watchSlidesVisibility: true,/*避免出现bug*/
		// 			},
		// 		}
		// 	})
		// },
	}
}
	
</script>

<style>
	.beyond{
		max-width: 70%;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		display: block;
	}
	.thumbs-slide{
		border-radius: 5px;
		overflow: hidden;
	}

	.swiper-slide-thumb-active{
		border: #054ffc 3px solid;
	}
	.active-thumb{
		display: none;
	}
	.swiper-slide-thumb-active .active-thumb{
		display: block;
	}
	
</style>